<template>
    <view class="teacher-info">
        <image class="avatar" :src="teacher.avatar?teacher.avatar:commonStore.baseImageUrl + 'test-yujia/reservation/empty-logo.png'" mode="aspectFill" />
        <view class="info">
            <view class="name">
                {{ teacher.name }}
                <text class="level-tag">
                    {{ getLevel(teacher.level) }}
                </text>
            </view>
            <view class="rating">
                <view class="star-container">
                    <image class="star" v-for="i in Math.floor(teacher.score / 2)" :key="i" :src="commonStore.baseImageUrl +
                        'test-yujia/reservation/wujiaoxing.png'
                        "></image>
                </view>
                <text class="score">{{ teacher.score / 2 }}</text>
            </view>
        </view>
        <view class="arrow-right" v-if="showArrow">
            <image :src="commonStore.baseImageUrl + 'test-yujia/reservation/arrow-right.png'" mode="widthFix" />
        </view>
    </view>
</template>
<script setup>
import { useCommonStore } from '@/store';
const commonStore = useCommonStore();
import { onMounted } from 'vue';

const props = defineProps({
    teacher: {
        type: Object,
        required: true
    },
    showArrow: {
        type: Boolean,
        default: true
    }
});

const getLevel = (level) => {
    // 1 初级 2 中级 3 高级
    return level === 1 ? '初级' : level === 2 ? '中级' : level === 3 ? '高级' : '金牌教练';
};
onMounted(() => {
    console.log("teacher", props.teacher);
});
</script>
<style lang="scss" scoped>
.teacher-info {
    display: flex;
    align-items: center;
    gap: 20rpx;

    .avatar {
        width: 98rpx;
        height: 98rpx;
        border-radius: 50%;
    }

    .info {
        flex: 1;

        .name {
            font-size: 34rpx;
            color: #3b3b3b;
            margin-bottom: 8rpx;
            display: flex;
            align-items: center;

            .level-tag {
                padding: 4rpx 10rpx;
                background: #2b2b2b;
                border-radius: 6rpx;
                font-size: 16rpx;
                color: #fff;
                box-sizing: border-box;
                flex-shrink: 0;
                margin-left: 16rpx;
            }
        }

        .rating {
            display: flex;
            align-items: center;
            gap: 8rpx;

            .star-container {
                .star {
                    width: 20rpx;
                    height: 20rpx;
                }
            }

            .score {
                font-size: 24rpx;
                color: #8cb22c;
            }
        }
    }

    .arrow-right {
        align-self: flex-start;
        image {
            width: 16rpx;
            height: 16rpx;
        }

    }
}
</style>
